<template>
  <div class="home">
    <div class="home_header">
      <!-- 系统/医院logo -->
      <img
        class="home_header_logo"
        @click="click_content"
      />
      <span class="home_header_title">闭环管理系统</span>
      <div
        v-for="modul in moduls"
        :key="modul.index"
        class="home_header_item"
        :class="{
          home_header_item_select: modul.index === nowSelectModul
        }"
        @click="click_modul(modul.index)"
      >
        {{ modul.title }}
      </div>
      <!-- 退出登录 -->
      <el-tooltip
        class="item"
        effect="dark"
        content="退出登录"
        placement="bottom-end"
      >
        <div class="home_header_imgbox" @click="click_login_out">
          <img src="../assets/img/LoginOut.png" />
        </div>
      </el-tooltip>
      <!-- 当前登录用户名 -->
      <span class="home_header_name">{{ username }}</span>
      <!-- 个人信息 -->
      <el-tooltip
        class="item"
        effect="dark"
        content="个人中心"
        placement="bottom-end"
      >
        <div class="home_header_imgbox" @click="click_modul(3)">
          <img :src="userImg" />
        </div>
      </el-tooltip>
      <!-- 消息中心 -->
      <el-tooltip
        class="item"
        effect="dark"
        content="消息中心"
        placement="bottom-end"
      >
        <div class="home_header_imgbox" @click="click_modul(4)">
          <img :src="messageImg" />
        </div>
      </el-tooltip>
      <!-- 我的收藏 -->
      <el-tooltip
        class="item"
        effect="dark"
        content="我的收藏"
        placement="bottom-end"
      >
        <div class="home_header_imgbox" @click="click_modul(5)">
          <img :src="collectionImg" />
        </div>
      </el-tooltip>
      <!-- 系统配置 -->
      <el-tooltip
        class="item"
        effect="dark"
        content="系统配置"
        placement="bottom-end"
      >
        <div class="home_header_imgbox" @click="click_modul(6)">
          <img :src="configImg" />
        </div>
      </el-tooltip>
    </div>
    <div class="home_main">
      <router-view />
    </div>
    <!-- 修复 el-drawer 的 .sync 问题 -->
    <!-- <el-drawer
      title="闭环追溯"
      v-model="drawerVisible"
      direction="ltr"
      size="1024px"
    >
    </el-drawer> -->
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user'; // 导入 Pinia Store

// 定义图片路径
import user_normal from '../assets/img/shezhi.png';
import user_select from '../assets/img/shezhi.png';
import message_normal from '../assets/img/shezhi.png';
import message_select from '../assets/img/shezhi.png';
import collection_normal from '../assets/img/shezhi.png';
import collection_select from '../assets/img/shezhi.png';
import config_normal from '../assets/img/shezhi.png';
import config_select from '../assets/img/shezhi.png';

const router = useRouter();
const store = useUserStore(); // 获取 Pinia Store 实例

// 响应式数据
const username = ref('');
const userImg = ref(user_normal);
const messageImg = ref(message_normal);
const collectionImg = ref(collection_normal);
const configImg = ref(config_normal);

// 直接访问 Pinia Store 的 state
const nowSelectModul = computed(() => store.nowSelectModul);


// 模块配置
const moduls = [
  { index: 0, title: '质控面板' },
  { index: 1, title: '患者检索' },
  { index: 2, title: '医嘱质控' },
];

// 方法
const click_login_out = () => {
  localStorage.clear();
  sessionStorage.clear();
  router.push({ name: 'Login' });
};

const click_content = () => {
  store.setNowSelectModul(0);
  router.push('/');
};

const set_img_modul_select = () => {
  switch (nowSelectModul.value) {
    case 3:
      userImg.value = user_normal;
      break;
    case 4:
      messageImg.value = message_normal;
      break;
    case 5:
      collectionImg.value = collection_normal;
      break;
    case 6:
      configImg.value = config_normal;
      break;
  }
};

const set_img_modul_select_now = () => {
  switch (nowSelectModul.value) {
    case 3:
      userImg.value = user_select;
      break;
    case 4:
      messageImg.value = message_select;
      break;
    case 5:
      collectionImg.value = collection_select;
      break;
    case 6:
      configImg.value = config_select;
      break;
  }
};

const click_modul = (index) => {
  if (nowSelectModul.value === index) return;

  set_img_modul_select();
  store.setNowSelectModul(index);
  set_img_modul_select_now();

  nextTick(() => {
    switch (index) {
      case 0:
        router.push('/home');
        break;
      case 1:
        router.push('/inhosp');
        break;
      case 2:
        router.push('/advmanager');
        break;
      case 3:
        userImg.value = user_select;
        router.push('/userbase');
        break;
      case 4:
        router.push('/usermessage');
        break;
      case 5:
        router.push('/collection');
        break;
      case 6:
        router.push('/config');
        break;
    }
  });
};

const set_select_byrouter = (path) => {
  if (path.includes('patsearch')) {
    store.setNowSelectModul(1);
  } else if (path.includes('advmanager')) {
    store.setNowSelectModul(2);
  } else if (path.includes('userbase')) {
    store.setNowSelectModul(3);
  } else if (path.includes('usermessage')) {
    store.setNowSelectModul(4);
  } else if (path.includes('collection')) {
    store.setNowSelectModul(5);
  } else if (path.includes('config') || path.includes('closecreate')) {
    store.setNowSelectModul(6);
  }
  set_img_modul_select_now();
};

// 初始化数据
onMounted(() => {
  const userinfo = JSON.parse(localStorage.getItem('userinfo'));
  username.value = userinfo?.REALNAME || '';
  set_select_byrouter(window.location.pathname);
});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  text-align: left;
}
.home_header {
  width: 100%;
  height: 60px;
  background: #007077;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0px;
}
.home_header_logo {
  height: 20px;
  margin-top: 18px;
  margin-left: 20px;
  margin-right: 10px;
  cursor: pointer;
}
.home_header_imgbox {
  float: right;
  height: 60px;
  width: 28px;
  text-align: center;
  cursor: pointer;
  margin-right: 14px;
}
.home_header_imgbox img {
  width: 18px;
  height: 18px;
  margin-top: 20px;
}
.home_header_name {
  font-size: 16px;
  color: #ffffff;
  float: right;
  margin-top: 19px;
  margin-left: 6px;
  margin-right: 6px;
}
.home_header_title {
  display: inline-block;
  font-size: 18px;
  color: #ffffff;
  vertical-align: top;
  margin-top: 15px;
  margin-right: 60px;
}
.home_main {
  width: 100%;
  height: calc(100% - 60px);
}
.home_header_item {
  display: inline-block;
  vertical-align: top;
  width: 180px;
  height: 60px;
  background-color: #007077;
  text-align: center;
  box-sizing: border-box;
  font-size: 16px;
  padding-top: 18px;
  color: #ffffff;
  cursor: pointer;
}
.home_header_item_select {
  background-color: #008d90;
}
.home_header_item:hover {
  background-color: #008d90;
}
</style>